<template>
  <div id="map"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
import 'mapbox-gl/dist/mapbox-gl.css'
export default {
  data() {
    return {
      gl: null,
    }
  },
  mounted() {
    mapboxgl.accessToken =
      'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bno1cGp6MDdxNjJubGdzZHQxOTVtaiJ9.shmGZyFnHkC2rc5d5dHgBA'
    // 'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bnl5dDFnMDZ0aTJwcDNsa3N4emF1biJ9.jFO8rJJN-kvaz9vuQ0odKQ'

    const map = new mapboxgl.Map({
      container: 'map',
      zoom: 3,
      center: [7.5, 58],
      style: 'mapbox://styles/mapbox/light-v10',
      // antialias: true, // 抗锯齿
    })

    // create a custom style layer to implement the WebGL content
    // 创建一个自定义样式层来实现 WebGL 内容
    const highlightLayer = {
      id: 'highlight',
      type: 'custom',

      // method called when the layer is added to the map
      // 当层添加到映射时调用
      // https://docs.mapbox.com/mapbox-gl-js/api/#styleimageinterface#onadd
      onAdd: (map, gl) => {
        // create GLSL source for vertex shader
        // 创建顶点着色器的 GLSL 源
        console.log(gl)
        this.gl = gl
        // console.log(map)
        const vertexSource = `
uniform mat4 u_matrix;
attribute vec2 a_pos;
void main() {
gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
}`

        // create GLSL source for fragment shader
        // 为片段着色器创建 GLSL 源
        const fragmentSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
}`

        // create a vertex shader
        // 创建顶点着色器
        console.log(gl.VERTEX_SHADER)
        console.log(gl.createShader)
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        gl.shaderSource(vertexShader, vertexSource)
        gl.compileShader(vertexShader)

        // create a fragment shader
        // 创建一个片段着色器
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
        gl.shaderSource(fragmentShader, fragmentSource)
        gl.compileShader(fragmentShader)

        // link the two shaders into a WebGL program
        // 将两个着色器链接到一个 WebGL 程序
        this.program = gl.createProgram()
        gl.attachShader(this.program, vertexShader)
        gl.attachShader(this.program, fragmentShader)
        gl.linkProgram(this.program)

        this.aPos = gl.getAttribLocation(this.program, 'a_pos')

        // define vertices of the triangle to be rendered in the custom style layer
        // 定义要在自定义样式层中渲染的三角形顶点
        const helsinki = mapboxgl.MercatorCoordinate.fromLngLat({
          lng: 25.004,
          lat: 60.239,
        })
        const berlin = mapboxgl.MercatorCoordinate.fromLngLat({
          lng: 13.403,
          lat: 52.562,
        })
        const kyiv = mapboxgl.MercatorCoordinate.fromLngLat({
          lng: 30.498,
          lat: 50.541,
        })

        // create and initialize a WebGLBuffer to store vertex and color data
        // 创建和初始化 WebGLBuffer 来存储顶点和颜色数据
        this.buffer = gl.createBuffer()
        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
        gl.bufferData(
          gl.ARRAY_BUFFER,
          new Float32Array([
            helsinki.x,
            helsinki.y,
            berlin.x,
            berlin.y,
            kyiv.x,
            kyiv.y,
          ]),
          gl.STATIC_DRAW
        )
      },

      // method fired on each animation frame
      // 每个动画帧启动方法
      // https://docs.mapbox.com/mapbox-gl-js/api/#map.event:render
      render: function (gl, matrix) {
        gl.useProgram(this.program)
        gl.uniformMatrix4fv(
          gl.getUniformLocation(this.program, 'u_matrix'),
          false,
          matrix
        )
        gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer)
        gl.enableVertexAttribArray(this.aPos)
        gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0)
        gl.enable(gl.BLEND)
        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3)
      },
    }
    console.log(highlightLayer)
    // add the custom style layer to the map
    // 添加自定义样式层到地图
    map.on('load', () => {
      map.addLayer(highlightLayer, 'building')
    })
  },
}
</script>

<style>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>